/**
 * context状态树实现，使用函数式组件
 * @link react-basic/src/02-advanced/07_context.js
 */
import React, {useContext, useEffect, useState } from 'react'
import axios from 'axios'
import '../css/05_non_father_son.css'

var GlobalContext = React.createContext();

function FilmItem(props) {
    let { name, poster, grade, synopsis } = props;
    const value = useContext(GlobalContext)
    return (
        <div className="filmItem" onClick={() => {
            value.changeInfo(synopsis)
        }}>
            <img src={poster} alt={name} />
            <h4>{name}</h4>
            <div>观众评分： {grade}</div>
        </div>
    )
}

function FilmDetail() {
    const value = useContext(GlobalContext)
    return (
        <div className="filmDetail">
            {value.info}
        </div>
    )
}

export default function App() {
    const [filmList, setFilmList] = useState([])
    const [info, setInfo] = useState("")

    useEffect(
        () => {
            axios.get("/test.json").then(res => {
                setFilmList(res.data.data.films);
            })
        }, []
    )
    return (
        <GlobalContext.Provider value={{
            info: info,
            changeInfo: (value) => {
                setInfo(value)
            }
        }}>
            <div>
                {
                    filmList.map(item =>
                        <FilmItem key={item.filmId} {...item}></FilmItem>
                    )
                }
                <FilmDetail></FilmDetail>
            </div>
        </GlobalContext.Provider>
    )

}
